<template>
    <div  id="RuleV1" class="rule-v1">
        <!--规则弹窗-->
        <div id="alertCommon" class="js_hide_com alert-wrap" v-if="ruleShow">
            <ul>
                <li class="alert-title">
                    <span class="alert-tilte-line"></span>{{defaultRule.title}}<span class="alert-tilte-line"></span>
                </li>
                <li class="alert-list">
                    <div class="rule-title-witem" >
                        <span class="rule-title-witem" v-for="(step,key) in defaultRule.steps" :key="key">
                            <span class="rule-title-item" v-html="step"></span><span v-if="(key+1) != defaultRule.steps.length" class="iconfont icon-sanjiaoxing"></span>
                        </span>
                    </div>
                </li>
                <li class="alert-list alert-list-rule">
                    <p v-for="ruleItem in defaultRule.rules">{{ruleItem}}</p>
                </li>
            </ul>
            <img class="rpfr-close-btn" @click="$emit('closeRule')" :src="staticImageUrl('images/close_icon_border.png')" alt="">
        </div>
        <v-bord>
            <div slot="cantClick"  @click="$emit('closeRule')" class="com_black"></div>
        </v-bord>
    </div>
</template>
<script>
    export default {
        name: 'rfprRule',
        data(){
            return{
                defaultRule:{
                    title:'活动规则',
                    steps:['开启红包','邀好友<br />拆红包','购买时<br />抵扣','付款'],
                    rules:['1111111111111111111','22222222222222222222','333333333333333333333','44444444444444444']
                },
                ruleShow:false
            }
        },
        props:{
            rule:{
                type:Object,
            }
        },
        mounted: function () {
            this.defaultRule = Object.assign(this.defaultRule,this.rule);
            this.ruleShow = true;
        },
        components:{
            "v-bord":()=>import('../../../../commonComponents/alert/Bord'),
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/alert.css');
    .alert-title{
        font-size: .17rem;
        color: #FA6F73;
        border-radius: 10px;
    }
    .rule-title-witem{
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .rule-title-item{
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        width: .72rem;
        height: .44rem;
        color: #fff;
        font-size: .15rem;
        background-color: #FA6F73;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        text-align: center;
    }
    .icon-sanjiaoxing{
        font-size: .08rem;
        padding: 0 .02rem;
        color: #FA6F73;
    }
    .alert-list{
        padding-left:.1rem;
        padding-right:.1rem;
        padding-top: .15rem;
        color: #FA6F73;
        p{
            padding: 0 .1rem;
            font-size: .12rem;
            line-height: .2rem;
        }
    }
    .alert-wrap{
        width: 3.5rem;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: .2rem 0;
    }
    .rpfr-close-btn{
        position: absolute;
        bottom: -.6rem;
        width: .44rem;
        height: .44rem;
        left: 0;
        right: 0;
        margin: auto;
    }
    .alert-list-rule{
        padding-top: .1rem;
    }
    .alert-tilte-line{
        display: inline-block;
        width: .2rem;
        height: 1px;
        background-color: #FA6F73;
        margin: 0 .1rem;
    }
</style>
